.checkbox {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    user-select: none;
    $size: 17px;
    $space: 8px;
    .checkbox__label {
      margin-right: $space;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
      display: inline-block;
      width: $size;
      height: $size;
      border-radius: 2px;
      background-color: #edf2f7;
      .icon {
        display: none;
      }
    }
    $checked-size: 17px;
    &.is-checked {
      .checkbox__label {
        display: flex;
        justify-content: center;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
        align-items: center;
        width: $checked-size;
        height: $checked-size;
        box-sizing: border-box;
        background: #00c58e;
        border: none;
        .icon {
          display: inline-block;
          color: #fff;
        }
      }
    }
    &.is-disabled {
      user-select: none;
      cursor: not-allowed;
      opacity: 0.5;
      &:hover {
        opacity: 0.5;
      }
    }
  }